<template>
	<div class="search">
		<Card>
			<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form"
				@keydown.enter.native="handleSearch">
				<!-- <Form-item label="姓名" prop="fullName">
          <Input
            type="text"
            v-model="searchForm.fullName"
            placeholder="请输入姓名"
            clearable
            style="width: 200px"
          />
        </Form-item>
        <Form-item label="身份证号" prop="carId">
          <Input
            type="text"
            v-model="searchForm.carId"
            placeholder="请输入身份证号"
            clearable
            style="width: 200px"
          />
        </Form-item> -->
				<Form-item label="状态" prop="type">
					<Select v-model="searchForm.partnerType" style="width:200px" placeholder="请选择合伙人状态">
						<Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.label }}</Option>
					</Select>
				</Form-item>
				<Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
			</Form>
			<Row class="operation padding-row">
				<!-- <Button @click="addexten" type="primary">添加推广人</Button> -->
			</Row>
			<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
				<!-- 商品栏目格式化 -->
				<template slot="goodsSlot" slot-scope="{ row }">
					<div style="margin: 5px 0px; height: 80px; display: flex">
						<!-- <div style="">
              <img
                :src="row.original"
                style="height: 60px; margin-top: 1px; width: 60px"
              />
            </div> -->

						<!-- main.js里创建二维码跳转的地址 -->

						<div style="margin-left: 13px">
							<!-- <div class="div-zoom">
                <a @click="linkTo(row.id, row.skuId)">{{ row.goodsName }}</a>
              </div> -->
							<!-- <Poptip trigger="hover" title="扫码在手机中查看" transfer>
								<div slot="content">
									<vue-qr :text="wapLinkTo(row.id, row.extension)" :margin="0" colorDark="#000"
										colorLight="#fff" :size="150"></vue-qr>
								</div>
								<img src="../../assets/qrcode.svg" class="hover-pointer" width="50" height="50"
									alt="" />
							</Poptip> -->
						</div>
					</div>
				</template>
			</Table>
			<Row type="flex" justify="end" class="mt_10">
				<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
					@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]"
					size="small" show-total show-elevator show-sizer></Page>
			</Row>
		</Card>
		<!-- 添加模态框 -->
		<Modal v-model="addFlag" title="添加推广人" width="1000" class="detmodel">
			<Form ref="addMemberForm" :model="addMemberForm" :rules="addRule" :label-width="100">
				<FormItem label="推广码" prop="extension" style="width: 90%">
					<span>{{ extension }}</span>
				</FormItem>
				<FormItem label="姓名" prop="fullName" style="width: 90%">
					<Input v-model="addMemberForm.fullName" maxlength="15" placeholder="请输入推广人姓名" />
				</FormItem>
				<FormItem label="手机号" prop="phone" style="width: 90%">
					<Input v-model="addMemberForm.phone" placeholder="请输入推广人手机号" />
				</FormItem>
				<FormItem label="身份证号" prop="carId" style="width: 90%">
					<Input v-model="addMemberForm.carId" placeholder="请输入推广人身份证号" />
				</FormItem>
				<FormItem label="性别" prop="sex" style="width: 90%">
					<RadioGroup type="button" button-style="solid" v-model="addMemberForm.sex">
						<Radio :label="0">
							<span>男</span>
						</Radio>
						<Radio :label="1">
							<span>女</span>
						</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="地址" prop="address" style="width: 90%">
					<Input v-model="addMemberForm.address" placeholder="请输入推广人地址" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button @click="addFlag = false">取消</Button>
				<Button type="primary" @click="addMemberSubmit">确定</Button>
			</div>
		</Modal>
		<!-- 编辑模态框 -->
		<Modal title="编辑" v-model="modalVisible" :mask-closable="false" :width="500">
			<Form ref="underForm" :model="underForm" :rules="editRule" :label-width="100">
				<FormItem label="推广码" prop="extension" style="width: 90%">
					<span>{{ underForm.extension }}</span>
				</FormItem>
				<FormItem label="姓名" prop="fullName" style="width: 90%">
					<Input v-model="underForm.fullName" maxlength="15" placeholder="请输入推广人姓名" />
				</FormItem>
				<FormItem label="手机号" prop="phone" style="width: 90%">
					<Input v-model="underForm.phone" placeholder="请输入推广人手机号" />
				</FormItem>
				<FormItem label="身份证号" prop="carId" style="width: 90%">
					<Input v-model="underForm.carId" placeholder="请输入推广人身份证号" />
				</FormItem>
				<FormItem label="性别" prop="sex" style="width: 90%">
					<RadioGroup type="button" button-style="solid" v-model="underForm.sex">
						<Radio :label="0">
							<span>男</span>
						</Radio>
						<Radio :label="1">
							<span>女</span>
						</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="地址" prop="address" style="width: 90%">
					<Input v-model="underForm.address" placeholder="请输入推广人地址" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" @click="modalVisible = false">取消</Button>
				<Button type="primary" :loading="submitLoading" @click="lower">提交</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		getlist,
		getaddlist,
		getaddslist,
		getdetlist,
		getdellist
	} from "@/api/partner";
	import vueQr from "vue-qr";
	export default {
		components: {
			"vue-qr": vueQr,
		},
		name: "goods",
		data() {
			return {
				addFlag: false,
				// 添加表单
				addMemberForm: {
					fullName: '',
					phone: '',
					carId: '',
					sex: '',
					address: '',
					extension: ''
				},
				addRule: {
					fullName: [{
						required: true,
						message: "请输入推广人姓名"
					}],
					phone: [{
						required: true,
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						message: "请输入推广人手机号",
						trigger: 'change'
					}],
					carId: [{
						required: true,
						pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/,
						message: "请输入推广人身份证号",
						trigger: 'change'
					}],
					sex: [{
						required: true,
						message: "请输入推广人性别"
					}],
					address: [{
						required: true,
						message: "请输入推广人地址"
					}],
				},
				id: "", //要操作的id
				loading: true, // 表单加载状态
				modalVisible: false, // 添加或编辑显示
				searchForm: {
					// 搜索框初始化对象
					pageNumber: 1, // 当前页数
					pageSize: 10, // 页面大小
					partnerType: ''
				},
				typeList: [{
						id: '',
						label: '全部'
					}, {
						id: 0,
						label: '非合伙人'
					},
					{
						id: 1,
						label: '事业合伙人'
					}, {
						id: 2,
						label: '天使合伙人'
					}, {
						id: 3,
						label: '推广员'
					}
				],
				// 编辑表单
				underForm: {
					fullName: '',
					phone: '',
					carId: '',
					sex: '',
					address: ''
				},
				editRule: {
					fullName: [{
						required: true,
						message: "请输入推广人姓名"
					}],
					phone: [{
						required: true,
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						message: "请输入推广人手机号",
						trigger: 'change'
					}],
					carId: [{
						required: true,
						pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/,
						message: "请输入推广人身份证号",
						trigger: 'change'
					}],
					sex: [{
						required: true,
						message: "请输入推广人性别"
					}],
					address: [{
						required: true,
						message: "请输入推广人地址"
					}],
				},
				submitLoading: false, // 添加或编辑提交状态
				columns: [{
						title: "推广码",
						key: "promotionCode",
						tooltip: true,
					},
					// {
					// 	title: "二维码",
					// 	key: "promotionImg",
					// 	slot: "goodsSlot",
					// },
					{
						title: "姓名",
						key: "username",
						tooltip: true,
					},
					{
						title: "手机号",
						key: "mobile",
						tooltip: true,
					},
					{
						title: "推广人数",
						key: "quantity",
						tooltip: true,
					}, {
						title: "状态",
						key: "partnerState",
						resizable: true,
						sortable: false,
						render: (h, param) => {
							if (param.row.partnerState == 0) {
								return h("Tag", {
									props: {
										color: "green",
									}
								}, "启用");
							}
							if (param.row.partnerState == 1) {
								return h("Tag", {
									props: {
										color: "volcano",
									}
								}, "禁用");
							}
						}
					}, {
						title: "合伙人类型",
						key: "partnerType",
						tooltip: true,
						render: (h, params) => {
							if (params.row.partnerType == 0) {
								return h("Tag", {
									props: {
										color: "blue",
									}
								}, "非合伙人");
							}
							if (params.row.partnerType == 1) {
								return h("Tag", {
									props: {
										color: "yellow",
									}
								}, "事业合伙人");
							}
							if (params.row.partnerType == 2) {
								return h("Tag", {
									props: {
										color: "red",
									}
								}, "天使合伙人");
							}
							if (params.row.partnerType == 3) {
								return h("Tag", {
									props: {
										color: "green",
									}
								}, "推广员");
							}

						},
					},
					{
						title: "操作",
						key: "action",
						align: "center",
						fixed: "right",
						width: 150,
						render: (h, params) => {
							return h(
								"div", {
									style: {
										display: "flex",
										justifyContent: "center",
									},
								},
								[
									h(
										"Button", {
											props: {
												type: "info",
												size: "small",
												ghost: true,
											},
											style: {
												marginRight: "5px",
												display: 'block',
											},
											on: {
												click: () => {
													this.edit(params.row);
												},
											},
										},
										"查看"
									)
								]
							);
						},
					},
				],
				data: [], // 表单数据
				total: 0, // 表单数据总数
				extension: ''
			};
		},
		methods: {
			// 初始化数据
			init() {
				this.getDataList();
			},
			// 获取数据
			getDataList() {
				this.loading = true;
				getlist(this.searchForm).then((res) => {
					this.loading = false;
					if (res.result.records) {
						this.data = res.result.records;
						this.total = res.result.total;
					}
				});
			},
			// 分页 改变页码
			changePage(v) {
				this.searchForm.pageNumber = v;
				this.getDataList();
			},
			// 分页 改变页数
			changePageSize(v) {
				this.searchForm.pageSize = v;
				this.getDataList();
			},
			// 搜索
			handleSearch() {
				this.searchForm.pageNumber = 1;
				this.searchForm.pageSize = 10;
				this.getDataList();
			},
			// 添加
			addexten() {
				getaddlist().then((res) => {
					if (res.code == 200) {
						this.extension = res.result.extension
						this.addFlag = true
						this.$refs.addMemberForm.resetFields();
					}
				});
			},
			//添加推广人提交
			addMemberSubmit() {
				this.$refs.addMemberForm.validate((valid) => {
					if (valid) {
						this.addMemberForm.extension = this.extension
						getaddslist(this.addMemberForm).then((res) => {
							if (res.code == 200) {
								this.$refs.addMemberForm.resetFields();
								this.getDataList();
								this.$Message.success("添加成功！");
								this.addFlag = false;
							}
						});
					} else {
						this.$Message.error('必填项不能为空!');
						return false
					}
				});
			},
			// 编辑
			edit(v) {
				this.id = v.id;
				// this.modalVisible = true;
				// this.$refs.underForm.resetFields();
				// this.getMemberInfo(v.id)
				this.$router.push({
					name: "extension-detail",
					query: {
						id: v.id,
						memberId: v.memberId,
						promotionCode: v.promotionCode
					}
				});
			},
			// 查询详情
			getMemberInfo(id) {
				getdetlist(id).then((res) => {
					if (res.result) {
						this.$set(this, "underForm", res.result);
					}
				});
			},
			// 编辑提交
			lower() {
				this.$refs.underForm.validate((valid) => {
					if (valid) {
						let params = {
							fullName: this.underForm.fullName,
							phone: this.underForm.phone,
							carId: this.underForm.carId,
							sex: this.underForm.sex,
							address: this.underForm.address,
							id: this.id
						}
						getaddslist(params).then((res) => {
							if (res.code == 200) {
								this.$refs.underForm.resetFields();
								this.getDataList();
								this.$Message.success("修改成功！");
								this.modalVisible = false;
							}
						});
					} else {
						this.$Message.error('必填项不能为空!');
						return false
					}
				});
			},
			// 删除推广人
			delete(v) {
				let delById = v.id
				this.$Modal.confirm({
					title: "提示",
					content: "<p>确认删除此推广人？</p>",
					onOk: () => {
						getdellist(delById).then((res) => {
							if (res.code == 200) {
								this.$Message.success("删除成功！");
								this.getDataList();
							} else {
								// this.$Message.error(res.message);
							}
						});
					},
				});
			},
		},
		mounted() {
			this.init();
		},
	};
</script>
